import 'package:flutter/material.dart';
import 'package:common_utils/common_utils.dart';

class TestPage extends StatefulWidget {
  const TestPage({Key? key}) : super(key: key);

  @override
  State<TestPage> createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  /// 当前小球的 x 坐标
  double currentX = 0;

  /// 当前小球的 y 坐标
  double currentY = 0;

  int milliseconds = 0;

  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.white,
        width: double.maxFinite,
        height: double.maxFinite,
        child: Stack(
          children: [
            AnimatedPositioned(
              duration: Duration(milliseconds: milliseconds),
              curve: Curves.easeOut,
              top: currentY,
              left: currentX,
              child: GestureDetector(
                /// 移动操作
                onPanUpdate: (e) {
                  setState(() {
                    // e 中只能获取到 delta 值 , 需要逐步累加
                    // print(currentX + e.delta.dx);
                    double x = 0;
                    double y = 0;
                    if ((currentX + e.delta.dx) > 195) {
                      x = 195;
                    } else if ((currentX + e.delta.dx) < 0) {
                      x = 0;
                    } else {
                      x = currentX + e.delta.dx;
                    }
                    if ((currentY + e.delta.dy) > 582) {
                      y = 582;
                    } else if ((currentY + e.delta.dy) < 0) {
                      y = 0;
                    } else {
                      y = currentY + e.delta.dy;
                    }
                    currentX = x;
                    currentY = y;
                    milliseconds = 0;
                  });
                },
                onPanEnd: (e) {
                  setState(() {
                    double x = currentX;
                    double y = currentY;
                    if ((195 - currentX) < 80) {
                      x = 195;
                    }
                    if ((582 - currentY) < 80) {
                      y = 582;
                    }
                    if (currentX < 80) {
                      x = 0;
                    }
                    if (currentY < 80) {
                      y = 0;
                    }
                    currentX = x;
                    currentY = y;
                    milliseconds = 300;
                  });
                },
                child: Container(
                  color: Colors.grey[300],
                  width: 200.0,
                  height: 200.0,
                  child: Center(
                    child: Text(
                    '${NumUtil.getNumByValueDouble(currentX, 2)},${NumUtil.getNumByValueDouble(currentY, 2)}'),
                  ),
                ),
              ),
            ),
          ],
        ),
      );
  }
}